.ranking-container {
    color: #202020;
    overflow-y: scroll;
}

.ranking-top {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6rem;
    padding: 8px 0;
    flex-wrap: wrap;
}

.ranking-type {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ranking-type-img {
    width: 60%;
}

.task-item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: #bfbfbf 2px solid;
    padding: 4px 0;
}

.rank-index {
    position: relative;
    width: 3rem;
    height: 4rem;
    color: #202020;
    text-align: center;
    line-height: 4rem;
    vertical-align:  middle;
    font-size: 1.6rem;
    .rank-medal {
        width: 2.7rem;
        height: 3.6rem;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }
}


.rank-avatar {
    width: 3rem;
    height: 3rem;
    position: relative;

    img {
        width: 2.8rem;
        height: 2.8rem;
        border-radius: 50%;
    }

    .rank-crown {
        width: 4rem;
        height: 3.6rem;
        position: absolute;
        left: -0.2rem;
        top: -0.6rem;
        z-index: -1;
    }
}

.rank-username {
	font-size: 1.2rem;
}

.rank-amount {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e87f32;
		font-size: 1.2rem;
    img {
		margin-left: 10px;

        width: 1.2rem;
        height: 1.2rem;
    }
}